<template>
  <view class="profile-container">
    <!-- 顶部个人信息卡片 -->
    <view class="profile-card">
      <view class="avatar-section">
        <image class="avatar" src="/static/my/my 头像.jpg" mode="aspectFill"></image>
        <text class="nickname">{{userInfo.nickname}}</text>
      </view>
    </view>

    <!-- 基本信息编辑区域 -->
    <view class="section">
      <view class="section-title">基本信息</view>
      <view class="form-item">
        <text class="label">姓名</text>
        <input type="text" v-model="userInfo.name" placeholder="请输入姓名"/>
      </view>
      <view class="form-item">
        <text class="label">性别</text>
        <picker @change="bindGenderChange" :value="genderIndex" :range="genderArray">
          <view class="picker">{{genderArray[genderIndex]}}</view>
        </picker>
      </view>
      <view class="form-item">
        <text class="label">年龄</text>
        <input type="number" v-model="userInfo.age" placeholder="请输入年龄"/>
      </view>
      <view class="form-item">
        <text class="label">本科院校</text>
        <input type="text" v-model="userInfo.university" placeholder="请输入本科院校"/>
      </view>
      <view class="form-item">
        <text class="label">专业</text>
        <input type="text" v-model="userInfo.major" placeholder="请输入专业"/>
      </view>
    </view>

    <!-- 学习目标设置区域 -->
    <view class="section">
      <view class="section-title">学习目标</view>
      <view class="form-item">
        <text class="label">目标院校</text>
        <input type="text" v-model="studyGoal.targetSchool" placeholder="请输入目标院校"/>
      </view>
      <view class="form-item">
        <text class="label">目标专业</text>
        <input type="text" v-model="studyGoal.targetMajor" placeholder="请输入目标专业"/>
      </view>
      <view class="form-item">
        <text class="label">每日学习时长(小时)</text>
        <slider :value="studyGoal.dailyStudyHours" :min="1" :max="16" :step="0.5" @change="handleStudyHoursChange" show-value/>
      </view>
    </view>

    <!-- 个性化设置区域 -->
    <view class="section">
      <view class="section-title">个性化设置</view>
      <view class="form-item">
        <text class="label">学习提醒</text>
        <switch :checked="preferences.studyReminder" @change="handleReminderChange"/>
      </view>
      <view class="form-item">
        <text class="label">深色模式</text>
        <switch :checked="preferences.darkMode" @change="handleDarkModeChange"/>
      </view>
      <view class="form-item">
        <text class="label">消息通知</text>
        <switch :checked="preferences.notifications" @change="handleNotificationChange"/>
      </view>
    </view>

    <!-- 保存按钮 -->
    <button class="save-btn" @tap="handleSave">保存修改</button>
  </view>
</template>

<script>
export default {
  data() {
    return {
      userInfo: {
        avatar: '/static/my/my头像.jpg',  // 更新默认头像路径
        nickname: '考研人',
        name: '',
        gender: '男',
        age: '',
        university: '',
        major: ''
      },
      genderArray: ['男', '女'],
      genderIndex: 0,
      studyGoal: {
        targetSchool: '',
        targetMajor: '',
        dailyStudyHours: 8
      },
      preferences: {
        studyReminder: true,
        darkMode: false,
        notifications: true
      }
    }
  },
  methods: {
    bindGenderChange(e) {
      this.genderIndex = e.detail.value
      this.userInfo.gender = this.genderArray[this.genderIndex]
    },
    handleStudyHoursChange(e) {
      this.studyGoal.dailyStudyHours = e.detail.value
    },
    handleReminderChange(e) {
      this.preferences.studyReminder = e.detail.value
    },
    handleDarkModeChange(e) {
      this.preferences.darkMode = e.detail.value
    },
    handleNotificationChange(e) {
      this.preferences.notifications = e.detail.value
    },
    handleSave() {
      // 构建要发送到后端的数据
      const dataToSave = {
        ...this.userInfo,
        studyGoal: this.studyGoal,
        preferences: this.preferences
      };

      uni.request({
        url: 'http://localhost:8080/api/user/profile',
        method: 'PUT',
        data: dataToSave,
        success: (res) => {
          if (res.statusCode === 200) {
            uni.showToast({
              title: '保存成功',
              icon: 'success'
            });
          } else {
            uni.showToast({
              title: '保存失败',
              icon: 'none'
            });
          }
        },
        fail: (err) => {
          console.error('保存数据失败', err);
          uni.showToast({
            title: '保存失败',
            icon: 'none'
          });
        }
      });
    }
  }
}
</script>

<style>
.profile-container {
  padding: 20rpx;
  background-color: #f5f5f5;
}

.profile-card {
  background-color: #A8BF8F;
  padding: 30rpx;
  border-radius: 20rpx;
  margin-bottom: 30rpx;
}

.avatar-section {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.avatar {
  width: 150rpx;
  height: 150rpx;
  border-radius: 75rpx;
  margin-bottom: 20rpx;
  background-color: #fff;  /* 添加白色背景 */
}

.nickname {
  color: #fff;
  font-size: 32rpx;
  font-weight: bold;
}

.section {
  background-color: #fff;
  border-radius: 20rpx;
  padding: 30rpx;
  margin-bottom: 30rpx;
}

.section-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 30rpx;
  border-left: 8rpx solid #A8BF8F;
  padding-left: 20rpx;
}

.form-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20rpx 0;
  border-bottom: 1rpx solid #eee;
}

.label {
  color: #666;
  font-size: 28rpx;
}

input {
  text-align: right;
  color: #333;
  font-size: 28rpx;
}

.picker {
  color: #333;
  font-size: 28rpx;
}

.save-btn {
  background-color: #A8BF8F;
  color: #fff;
  border-radius: 40rpx;
  margin-top: 40rpx;
  font-size: 32rpx;
}

.save-btn:active {
  opacity: 0.8;
}
</style>